<template>
  <div class="ad-form">
    <div class="ad-block">
      <ux-grid ref="tableForm" keep-source :edit-config="{trigger: 'click', mode: 'cell'}" :rules="rules" class="table-form">
<!--        <ux-table-column type="index" width="60" align="center" />-->
        <ux-table-column title="客户类型" field="companyType" show-header-overflow :edit-render="form.result == 1">
<!--          <template v-slot="{row}"><value :model="row" prop="companyType" dictName="customer_type"/></template>-->
<!--          <template v-slot:edit="scope">-->
          <template v-slot="scope">
            <el-select v-model="scope.row.companyType" placeholder="请输入">
              <el-option v-for="item in dict['customer_type']" :key="item.id" :label="item.label" :value="Number(item.value)" />
            </el-select>
          </template>
        </ux-table-column>
        <ux-table-column title="是否月结" field="companyNature" show-header-overflow :edit-render="form.result == 1">
<!--          <template v-slot="{row}"><value :model="row" prop="companyNature" dictName="yes_or_no"/></template>-->
<!--          <template v-slot:edit="scope">-->
          <template v-slot="scope">
            <el-select v-model="scope.row.companyNature" placeholder="请输入">
              <el-option v-for="item in dict['yes_or_no']" :key="item.id" :label="item.label" :value="Number(item.value)" />
            </el-select>
          </template>
        </ux-table-column>
        <ux-table-column title="公司名称" field="companyName" show-header-overflow :edit-render="form.result == 1">
<!--          <template v-slot:edit="scope">-->
          <template v-slot="scope">
            <el-input v-model="scope.row.companyName" clearable />
          </template>
        </ux-table-column>
        <ux-table-column title="选择公司" field="companyId" show-header-overflow :edit-render="form.result == 1">
          <template v-slot="{row}">{{companySuggest.filter(company => company.companyId == row.companyId).length ? companySuggest.filter(company => company.companyId == row.companyId)[0].companyName : ''}}</template>
          <template v-slot="scope">
            <el-select v-model="scope.row.companyId" placeholder="请选择" filterable clearable>
              <el-option v-for="company in companySuggest" :key="company.companyId" :label="company.companyName" :value="company.companyId" />
            </el-select>
          </template>
        </ux-table-column>
        <ux-table-column title="联系人" field="name" show-header-overflow :edit-render="form.result == 1">
          <template v-slot="scope">
            <el-input v-model="scope.row.name" clearable />
          </template>
        </ux-table-column>
        <ux-table-column title="联系电话" field="phone" show-header-overflow :edit-render="form.result == 1">
          <template v-slot="scope">
            <el-input v-model="scope.row.phone" clearable />
          </template>
        </ux-table-column>
        <!--    <ux-table-column title="城市" field="city" show-header-overflow :edit-render="form.result == 1">-->
        <!--      <template v-slot="{row}">{{parseCityCode(row.city).slice('1').join('/')}}</template>-->
        <!--      <template v-slot:edit="{row}">-->
        <!--        <ad-city-select v-model="row.city" :options="provinceAndCityData" :props="{expandTrigger: 'hover'}" filterable clearable />-->
        <!--      </template>-->
        <!--    </ux-table-column>-->
        <ux-table-column title="添加时间" field="createTime" show-header-overflow width="140"><template v-slot="{row}"><value :model="row" prop="createTime" type="datetime"/></template></ux-table-column>
        <ux-table-column title="添加人" field="createUserName" show-header-overflow />
      </ux-grid>
    </div>
    <div class="op">
      <el-button type="primary" :loading="saving" @click="save">保 存</el-button>
      <el-button type="primary" plain @click="cancel">取 消</el-button>
    </div>
  </div>
</template>

<script>
import Value from '@/components/AdValue'
import { get, add, getCompanySuggest } from '@/api/relation/verifyLinkman'

export default {
  components: { Value },
  dicts: ['customer_type','yes_or_no'],
  data() {
    return {
      tableData: [],
      companySuggest: [],
      saving: false,
      form: { result: '1', description: '' },
      rules: {
        companyType: [{required: true, message: '请选择客户类型'}],
        companyNature: [{required: true, message: '请选择是否月结'}],
        companyName: [{required: true, message: '请输入公司名称'}],
        // companyId: [{required: true, message: '请选择公司'}],
        name: [{required: true, message: '请输入联系人'}],
        phone: [{required: true, message: '请输入联系电话'}],
        city: [{required: true, message: '请选择城市'}],
      }
    }
  },
  async created() {
    this.loadData()
  },
  watch: {
    '$attrs.visible'(visible) {
      if (visible) {
        this.loadData()
      }
    }
  },
  methods: {
    async save() {
      try {
        const invalid = await this.$refs.tableForm.validate(this.tableData)
        if (invalid) return
        await this.$confirm('确定保存吗？','保存')
        this.saving = true
        await add(this.tableData[0])
        this.$emit('update:visible',false)
        this.$emit('saved')
      }
      finally {
        this.saving = false
      }
    },
    cancel() {
      this.$emit('update:visible',false)
    },
    loadData() {
      get({id: this.$attrs.id}).then(res => {
        const rawData = res.data
        this.tableData = [res.data]
        this.$refs.tableForm.reloadData(this.tableData)
        getCompanySuggest().then(res => {
          this.companySuggest = [{companyId: rawData.companyId, companyName: rawData.companyName}, ...res.data]
        })
      })
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .elx-table {
  .elx-header--column { height: 38px; font-size: 12px; font-weight: normal; color: #000; }
  .elx-body--column { height: 38px; font-size: 12px; color: #000; }
}
::v-deep {
  .el-input__inner { height: 28px; font-size: 12px;}
  .el-input__suffix { display: flex; align-items: center; overflow: hidden; }
}
</style>